<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width:300px;height:300px;background: #399;border: solid 1px black;}
        .box2{width:200px;height:200px;background: #393;margin: 50px;border: solid 1px black;}
        .box3{width:100px;height:100px;background: #939;margin: 50px;}
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
</body>
<script>

    var oBox1 = document.querySelector(".box1")
    var oBox2 = document.querySelector(".box2")
    var oBox3 = document.querySelector(".box3")

    // oBox1.onclick = function(eve){
    //     var e = eve || window.event;
    //     alert("box1");
    //     stopBubble(e);
    // }
    // oBox2.onclick = function(eve){
    //     var e = eve || window.event;
    //     alert("box2");
    //     stopBubble(e);
    // }
    // oBox3.onclick = function(eve){
    //     var e = eve || window.event;
    //     alert("box3");
    //     stopBubble(e);
    // }

    oBox1.addEventListener("click", function(){
        alert("捕获的box1")
    }, true)
    oBox1.addEventListener("click", function(){
        alert("冒泡的box1")
    }, false)
    oBox2.addEventListener("click", function(){
        alert("捕获的box2")
    }, true)
    oBox2.addEventListener("click", function(){
        alert("冒泡的box2")
    }, false)
    oBox3.addEventListener("click", function(){
        alert("捕获的box3")
    }, true)
    oBox3.addEventListener("click", function(){
        alert("冒泡的box3")
    }, false)

    function stopBubble(e){
        if(e.stopPropagation){
            e.stopPropagation()
        }else{
            e.cancelBubble = true;
        }
    }
    
</script>
</html>